<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			 .imgc{
			         /*过渡属性---旋转的转换的属性*/
			         transition: transform 10s;
			     /*动画复合属性: 关键帧名称 过渡时间  流畅度 无限次*/
			       animation: heart .8s linear infinite;
			}
			 @keyframes heart {
			            0%{
			                 transform: rotate(180deg);
			            }
			            30%{
			                transform: rotate(360deg);
			            }
			            100%{
			                transform: rotate(720deg);
			            }
			        }	 
					.imgb{
					         /*过渡属性---旋转的转换的属性*/
					         transition: transform 10s;
					     /*动画复合属性: 关键帧名称 过渡时间  流畅度 无限次*/
					       animation: heart1 .8s linear infinite;
					}
					 @keyframes heart1 {
					            0%{
					                 transform: rotateY(180deg) scale(1);
					            }
					            30%{
					                transform: rotateY(360deg) scale(1.2);
					            }
					            100%{
					                transform: rotateY(720deg) scale(1.4);
					            }
					        }	 
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button id="btn1">开转</button>
		<button id="btn2">停止转</button>
		<button id="btn3">反转</button>
		<img src="img/dfc.jpg">
		<audio src="img/dafengche.mp3" autoplay loop></audio>
		<script>
			$("#btn1").click(function(){
				$("img").attr("src","img/dfc.jpg").addClass("imgc");
				
			})
			$("#btn2").click(function(){
				$("img").attr("src","img/dfc.jpg").removeClass("imgc");
				
			})
			$("#btn3").click(function(){
				$("img").attr("src","img/dfc.jpg").addClass("imgb");
				
			})
		</script>
	</body>
</html>